<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>小米商城</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/fonts.css">
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <!-- 顶部栏 -->
  <div class="topBar">
    <div class="container">
      <div class="topBar_list">
        <a href="#">小米商城</a>
        <span>|</span>
        <a href="#">MIUI</a>
        <span>|</span>
        <a href="#">loT</a>
        <span>|</span>
        <a href="#">云服务</a>
        <span>|</span>
        <a href="#">金融</a>
        <span>|</span>
        <a href="#">有品</a>
        <span>|</span>
        <a href="#">小爱开放平台</a>
        <span>|</span>
        <a href="#">政企服务</a>
        <span>|</span>
        <a href="#">资质证照</a>
        <span>|</span>
      </div>
      <div class="shop">
        <!-- <span>图标</span> -->

        <a href="#">
          <i class="iconfont">&#xe61b;</i>
          购物车(0)
        </a>
      </div>
      <div class="login">
        <a href="#">登录</a>
        <span>|</span>
        <a href="#">注册</a>
        <span>|</span>
        <a href="#">消息通知</a>
      </div>
    </div>
  </div>
  <!-- 导航栏 -->
  <div class="header">
    <div class="container">
      <div class="site-logo">
        <a href="#">
          <img src="./images/logo.jpg" alt="">
        </a>
      </div>
      <div class="site-list">
        <ul class="clearfix">
          <li class="site-category">
            <a href="">全部商品分类</a>
            <!-- 侧边栏 -->
            <div class="category-list">
              <ul>
                <li>
                  <a href="#">手机 电话卡
                    <span>></span>
                  </a>
                </li>
                <li>
                  <a href="#">电视 盒子
                    <span>></span>
                  </a>
                </li>
                <li>
                  <a href="#">笔记本 平板
                    <span>></span>
                  </a>
                </li>
                <li>
                  <a href="#">家电 插线板
                    <span>></span>
                  </a>
                </li>
                <li>
                  <a href="#">出行 穿戴
                    <span>></span>
                  </a>
                </li>
                <li>
                  <a href="#">智能 路由器
                    <span>></span>
                  </a>
                </li>
                <li>
                  <a href="#">电源 配件
                    <span>></span>
                  </a>
                </li>
                <li>
                  <a href="#">健康 儿童
                    <span>></span>
                  </a>
                </li>
                <li>
                  <a href="#">耳机 音响
                    <span>></span>
                  </a>
                </li>
                <li>
                  <a href="#">生活 箱包
                    <span>></span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">小米手机</a></li>
          <li><a href="#">红米</a></li>
          <li><a href="#">电视</a></li>
          <li><a href="#">笔记本</a></li>
          <li><a href="#">家电</a></li>
          <li><a href="#">新品</a></li>
          <li><a href="#">路由器</a></li>
          <li><a href="#">智能硬件</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">社区</a></li>
        </ul>
      </div>
      <div class="site-search">
        <form action="">
          <input type="text" name="shop" class="search-text">
          <input type="submit" class="search-btn iconfont" value="&#xeafe;" style="font-size: 24px">
          <div class="search-word">
            <a href="#">小米9</a>
            <a href="#">小米9 SE</a>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- 主页内容 -->
  <div class="site-content">
    <div class="container">
      <!-- 轮播图 -->
      <div class="site-slider">
        <a href="#">
          <img src="./images/img1.jpg" alt="">
        </a>
        <span href="#" class="next"></span>
        <span href="#" class="prev"></span>
        <div class="slider-item">
          <a href="#"></a>
          <a href="#"></a>
          <a href="#"></a>
          <a href="#"></a>
          <a href="#"></a>
        </div>
      </div>
      <!-- 向导 -->
      <div class="content-sub">
        <div class="content-channel">
          <ul class="channel-list clearfix">
            <li>
              <a href="#"><i class="iconfont">&#xe633;</i>选购手机</a>
            </li>
            <li>
              <a href="#"><i class="iconfont">&#xe6a2;</i>企业团购</a>
            </li>
            <li>
              <a href="#"><i class="iconfont">&#xe60c;</i>F码通道</a>
            </li>
            <li>
              <a href="#"><i class="iconfont">&#xe618;</i>米粉卡</a>
            </li>
            <li><a href="#"><i class="iconfont">&#xe68a;</i>以旧换新</a>
            </li>
            <li><a href="#"><i class="iconfont">&#xe600;</i>话费充值</a></li>
          </ul>
        </div>
        <div class="content-list">
          <ul>
            <li><a href="#"><img src="./images/img2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/img3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/img4.jpg" alt=""></a></li>
          </ul>
        </div>

      </div>
    </div>
    <div class="content-banner">
      <div class="container">
        <a href="#">
          <img src="./images/img5.jpg" alt="">
        </a>
      </div>
    </div>
  </div>
  <!-- 内容详情 -->
  <div class="content-desc">
    <div class="container">
      <!-- 标题 -->
      <div class="box-hd">
        <h2>手机</h2>
        <div class="more">
          <a href="#">
            查看全部
            <img src="./images/next1.png" alt="">
          </a>
        </div>
      </div>
      <!-- 内容 -->
      <div class="box-bd">
        <div class="row">
          <div class="row-l">
            <a href="#">
              <img src="./images/row-l.webp" alt="">
            </a>
          </div>
          <div class="row-r">
            <ul>
              <li>
                <!-- 图像 -->
                <div class="figure">
                  <a href="#">
                    <img src="./images/row-r-2.webp" alt="">
                  </a>
                </div>
                <!-- 标题 -->
                <h3 class="title">
                  <a href="#">小米9 6GB+128GB</a>
                </h3>
                <p class="desc">骁龙855， 弹出全面屏</p>
                <p class="price">
                  <span class="num">2999</span>元
                </p>
                <div class="flag flag-new">新品</div>
              </li>
              <li>
                <div class="figure">
                  <a href="#">
                    <img src="./images/row-r-3.webp" alt="">
                  </a>
                </div>
                <h3 class="title">
                  <a href="#">小米9 6GB+128GB</a>
                </h3>
                <p class="desc">骁龙855， 弹出全面屏</p>
                <p class="price">
                  <span class="num">2999</span>元
                </p>
                <div class="flag flag-new">新品</div>
              </li>
              <li>
                <div class="figure">
                  <a href="#">
                    <img src="./images/row-r-4.webp" alt="">
                  </a>
                </div>
                <h3 class="title">
                  <a href="#">小米9 6GB+128GB</a>
                </h3>
                <p class="desc">骁龙855， 弹出全面屏</p>
                <p class="price">
                  <span class="num">2999</span>元
                </p>
                <div class="flag flag-new">新品</div>
              </li>
              <li>
                <div class="figure">
                  <a href="#">
                    <img src="./images/row-r-1.webp" alt="">
                  </a>
                </div>
                <h3 class="title">
                  <a href="#">小米9 6GB+128GB</a>
                </h3>
                <p class="desc">骁龙855， 弹出全面屏</p>
                <p class="price">
                  <span class="num">2999</span>元
                </p>
                <div class="flag flag-new">新品</div>
              </li>
              <li>
                <div class="figure">
                  <a href="#">
                    <img src="./images/row-r-5.webp" alt="">
                  </a>
                </div>
                <h3 class="title">
                  <a href="#">小米9 6GB+128GB</a>
                </h3>
                <p class="desc">骁龙855， 弹出全面屏</p>
                <p class="price">
                  <span class="num">2999</span>元
                </p>
                <div class="flag flag-new">新品</div>
              </li>
              <li>
                <div class="figure">
                  <a href="#">
                    <img src="./images/row-r-6.webp" alt="">
                  </a>
                </div>
                <h3 class="title">
                  <a href="#">小米9 6GB+128GB</a>
                </h3>
                <p class="desc">骁龙855， 弹出全面屏</p>
                <p class="price">
                  <span class="num">2999</span>元
                </p>
                <div class="flag flag-new">新品</div>
              </li>
              <li>
                <div class="figure">
                  <a href="#">
                    <img src="./images/row-r-7.webp" alt="">
                  </a>
                </div>
                <h3 class="title">
                  <a href="#">小米9 6GB+128GB</a>
                </h3>
                <p class="desc">骁龙855， 弹出全面屏</p>
                <p class="price">
                  <span class="num">2999</span>元
                </p>
                <div class="flag flag-new">新品</div>
              </li>
              <li>
                <div class="figure">
                  <a href="#">
                    <img src="./images/row-r-8.webp" alt="">
                  </a>
                </div>
                <h3 class="title">
                  <a href="#">小米9 6GB+128GB</a>
                </h3>
                <p class="desc">骁龙855， 弹出全面屏</p>
                <p class="price">
                  <span class="num">2999</span>元
                </p>
                <div class="flag flag-new">新品</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 脚部 -->
  <div class="footer">
    <div class="container">
      <div class="footer-service">
        <ul class="clearfix">
          <li class="first">
            <a href="#">
              <i class="iconfont">&#xe715;</i>
              预约维修服务
            </a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont">&#xe691;</i>
              7天无理由退货
            </a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont">&#xe606;</i>
              15天免费换货
            </a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont">&#xe6a2;</i>
              满150元包邮
            </a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont">&#xe603;</i>
              520余家售后网点
            </a>
          </li>
        </ul>
      </div>
      <div class="footer-links clearfix">
        <dl class="col-links">
          <dt>帮助中心</dt>
          <a href="#">
            <dd>账号管理</dd>
          </a>
          <a href="#">
            <dd>购物指南</dd>
          </a>
          <a href="#">
            <dd>订单操作</dd>
          </a>
        </dl>
        <dl class="col-links">
          <dt>服务支持</dt>
          <a href="#">
            <dd>售后政策</dd>
          </a>
          <a href="#">
            <dd>自助服务</dd>
          </a>
          <a href="#">
            <dd>相关下载</dd>
          </a>
        </dl>
        <dl class="col-links">
          <dt>线下门店</dt>
          <dd href="#">
          <dd>小米之家</dd>
          </a> <a href="#">
            <dd>服务网点</dd>
          </a>
          <a href="#">
            <dd>授权体验店</dd>
          </a>
        </dl>
        <dl class="col-links">
          <dt>关于小米</dt>
          <a href="#">
            <dd>了解小米</dd>
          </a>
          <a href="#">
            <dd>加入小米</dd>
          </a>
          <a href="#">
            <dd>投资者关系</dd>
          </a>
        </dl>
        <dl class="col-links">
          <dt>关注我们</dt>
          <a href="#">
            <dd>新浪微博</dd>
          </a>
          <a href="#">
            <dd>官方微信</dd>
          </a>
          <a href="#">
            <dd>联系我们</dd>
          </a>
        </dl>
        <dl class="col-links">
          <dt>特色服务</dt>
          <a href="#">
            <dd>F码通道</dd>
          </a>
          <a href="#">
            <dd>礼物码</dd>
          </a>
          <a href="#">
            <dd>防伪查询</dd>
          </a>
        </dl>
        <div class="col-contact">
          <p class="iphone">400-100-5678</p>
          <p>
            周一至周日 8:00-18:00
            <br>
            （仅收市话费）
          </p>
          <a href="#">
            <i class="iconfont">&#xe633;</i>
            联系客服
          </a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>